2024a 第05回:Webページの作成

これまでの授業の振り返り

現実世界の情報を、どのようにコンピュータで上手く扱うか？

デジタルとアナログ

現実世界のあらゆる情報は連続値 (音声、視覚、気温…)

→ 電気的に扱い易い離散値(0,1 = 2進数に)

https://gyazo.com/83bf79a82e2f672d0e924f38378246b6

2進数で様々なデータを扱う方法

音声、画像、動画 = 標本化、量子化、符号化

https://gyazo.com/38128653a5904104411c39ee6cb84756

文字 = 文字コード表

https://gyazo.com/5c03f508daea4f1f434877694bd5dc35

16進数 = 2進数を1/4桁で扱える (人間が嬉しい)

本日のゴール

https://gyazo.com/d6a9d0bca39f318de3f95c5c36b1a1e9

基礎理論を一度抑えたところで、一度一気に実用に寄せていきます

現代コンピュータの主用途とすらいえる「web」の基礎を抑える

実際に皆さんに表示されている画面を構成する「HTML/CSS」を理解いただく

導入：編集ツールとしてVSCodeをインストールしよう

Microsoftが提供するソースコードエディタ (=プログラミングに特化したテキストエディタ)

html,cssの実装のほか、プログラミングにもよく使います

wordは装飾情報等が入ってしまうため、コーディングには不適

コーディングのためにはテキストエディタを用いる

「保存」操作を忘れずに

各アプリケーション上で編集した内容は、明示的に都度ディスクに「保存」する必要がある

「VSCode」で編集したファイルを「Chrome」で開く場合…

ChromeとVSCodeは当然別アプリ、ChromeからVSCodeのアプリケーション内は覗けない

2つの共通領域はあくまでディスクのみ

あらゆるwebブラウザ画面はhtml+cssで表現されている

ネットバンクの残高表示もhtml+css、イジればこんなことも

https://gyazo.com/4b98049aaba61ec1c76d07df6d4924e0

どんなタグがあるか

右クリック→検証　からHTMLを編集可能

ゼロからcssをデザインするのは大変

オープンソースで汎用的なデザインテンプレートが配信されている

タグとclassを正しく使うのがミソ

小テスト

なし

タイピングテストを先にやります

課題

課題は本日終わらせて帰ろう！